<template>
	<view class="beijing1" style="position: relative">
		<u-navbar
			:placeholder="true"
			title="妆造日期"
			@rightClick="rightClick"
			:autoBack="true"
			bg-color="transparent"
			left-icon-color="#ffffff"
			:title-style="{ color: '#ffffff' }"
		></u-navbar>
		<image :src="img + state.peizhi.adorn_bg" mode="" style="width: 100%; height: 1193rpx; position: absolute; z-index: 0; top: 0"></image>

		<view class="" style="position: fixed; bottom: 0; width: 100%; height: 480rpx; z-index: 1; border-radius: 50rpx">
			<view class="" style="position: absolute; top: 0; width: 100%">
				<image src="/static/beitu.png" mode="" style="width: 100%; height: 480rpx; border-radius: 30rpx 30rpx 0rpx 0rpx"></image>
			</view>
			<view class="" style="padding: 0 30rpx; position: relative; z-index: 1">
				<view class="center" style="padding-top: 50rpx; position: relative">
					<text style="font-weight: 400; font-size: 33rpx; color: #222222">选择日期</text>
					<!-- <text style="font-weight: 400; font-size: 30px; color: #888888; position: absolute; top: 35rpx; right: 0">×</text> -->
				</view>
				<view class="" style="position: relative; z-index: 1">
					<view class="" style="">
						<view class="flex1" style="margin-top: 50rpx">
							<scroll-view scroll-x style="width: 80%;white-space: nowrap;" :scroll-into-view="scrollId">
								<view class="xun" v-for="(item, index) in dateList" :key="index" style="display: inline-block" :id="`dateScroll${index}`">
									<view class="column center wei" style="" :class="{ xvan: a == index }" @click="xvan(index, item)">
										<view class="" style="">{{ item.week_str }}</view>
										<view class="" style="">{{ item.date_str }}</view>
									</view>
								</view>
							</scroll-view>
							<view class="flex" style="width: 20%" @click="open">
								<view class="" style="padding: 0 30rpx">
									<view class="" style="width: 2rpx; height: 76rpx; background: #8c1608"></view>
								</view>
								<view class="column">
									<view class="" style="font-weight: 400; font-size: 30rpx; color: #11130b">全部</view>
									<view class="" style="font-weight: 400; font-size: 30rpx; color: #11130b">日期</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="position: absolute; bottom: env(safe-area-inset-bottom); width: 100%">
				<view class="" style="padding: 0 30rpx">
					<view class="center" style="height: 80rpx; background: #8c1608; border-radius: 40rpx" @click="show = true">
						<view class="" style="font-weight: 400; font-size: 30rpx; color: #ffffff">立即预定</view>
					</view>
				</view>
			</view>
			<view class="" style="height: env(safe-area-inset-bottom)"></view>
		</view>
		<view class="beijing"></view>
		<uv-calendars
			:startDate="startDate"
			:endDate="endDate"
			:selected="selected"
			color="#8C1608"
			title="日期选择"
			ref="calendars"
			@confirm="confirm"
			confirmText="12"
			@close="close"
		/>
		<u-popup :show="show" mode="center" round="10rpx" :safeAreaInsetBottom="false">
			<view style="background: #f0e9dc; border-radius: 15rpx; width: calc(100vw - 50rpx); height: 1000rpx; position: relative">
				<view class="" style="padding: 50rpx 40rpx">
					<view class="center" style="position: relative">
						<text style="font-weight: 400; font-size: 33rpx; color: #222222">预订须知</text>
						<view class="" style="position: absolute; right: 0; top: 13rpx" @click="xha">
							<text style="font-weight: 400; font-size: 40px; color: #222222; line-height: 0">×</text>
						</view>
					</view>
					<view class="" style="font-weight: 400; font-size: 26rpx; color: #222222; margin-top: 30rpx">
						<u-parse :content="state.xieyi.book_notice_adorn"></u-parse>
					</view>
				</view>
				<view class="" style="position: absolute; bottom: 0; right: 0">
					<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
				</view>
				<view class="" style="position: absolute; bottom: 40rpx; left: 40rpx" v-if="show">
					<button class="center bb" @click="tong" :disabled="dis">
						<view class="flex" style="">
							<view class="">我已阅读并同意此协议（</view>
							<u-count-down :time="3000" format="ss" @finish="finish"></u-count-down>
							<view class="">秒）</view>
						</view>
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dateList: [],
			dateRange: 7,
			a: 0,
			startDate: '',
			endDate: '',
			show: false,
			content: '',
			dis: true,
			time_str: '',
			scrollId:''
		};
	},
	onLoad(ops) {
		this.init();
	},
	onShow() {},
	methods: {
		xha() {
			this.dis = true;
			this.show = false;
		},
		finish() {
			this.dis = false;
		},
		tong() {
			this.dis = true;
			this.show = false;
			uni.navigateTo({
				url: `/pagesA/zhuangzaoyvding/zhuangzaoyvding?time_str=${this.time_str}`
			});
		},
		yv() {
			this.show = true;
		},
		close() {
			this.$refs.calendars.close();
		},
		open() {
			this.$refs.calendars.open();
		},
		confirm(e) {
			let m = this.dateList.findIndex((item) => item.date == e.date);
			if (m != -1) {
				this.a = m;
			} else {
				this.a = 10;
			}
			this.time_str = e.fulldate;
			this.show = true;
			console.log(e);
			this.dateList.forEach(item => {
				console.log(item);
				if(item.fulldate == e.fulldate){
					this.scrollId = `dateScroll${item.id}`
				}
			})
		},
		xvan(e, item) {
			this.a = e;
			this.time_str = item.year + '-' + item.date_str;
			console.log(this.time_str);
		},
		rightClick() {
			console.log('rightClick');
		},
		leftClick() {
			console.log('leftClick');
		},
		scrolltolower() {
			console.log('到底了');
		},
		init() {
			const dateInstance = new Date();
			const dateList = [];
			for (var i = 0; i < this.dateRange; i++) {
				dateList.push({
					...this.getDateObjec(this.getNextSomeDay(dateInstance, i)),
					id:i
				});
			}
			this.dateList = dateList;
			this.startDate = this.dateList[0].year + '-' + this.dateList[0].date_str;
			this.endDate = this.dateList[this.dateList.length - 1].year + '-' + this.dateList[this.dateList.length - 1].date_str;
			this.time_str = this.dateList[0].year + '-' + this.dateList[0].date_str;
			console.log(this.dateList);
		},
		getNextSomeDay(date, num) {
			const nextDay = new Date(date);
			nextDay.setDate(nextDay.getDate() + num);
			return nextDay;
		},
		getDateObjec(_date) {
			const dateInstance = _date ? new Date(_date) : new Date();
			const year = dateInstance.getFullYear();
			const month = dateInstance.getMonth() + 1;
			const date = dateInstance.getDate();
			const day = dateInstance.getDay();
			const hour = dateInstance.getHours();
			const dateStr = `${this.fillZero(month)}-${this.fillZero(date)}`;
			const weekStr = this.getWeekStr(day);
			const fulldate = `${this.fillZero(year)}-${this.fillZero(month)}-${this.fillZero(date)}`;
			return {
				date_str: dateStr,
				date,
				hour,
				year,
				week_str: '周' + weekStr,
				fulldate:fulldate
			};
		},
		fillZero(num) {
			if (num < 10) {
				return '0' + num;
			}
			return num;
		},
		getWeekStr(week) {
			let week_str = '';
			switch (week) {
				case 0:
					week_str = '日';
					break;
				case 1:
					week_str = '一';
					break;
				case 2:
					week_str = '二';
					break;
				case 3:
					week_str = '三';
					break;
				case 4:
					week_str = '四';
					break;
				case 5:
					week_str = '五';
					break;
				case 6:
					week_str = '六';
					break;
			}
			return week_str;
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-count-down__text {
	font-weight: 400 !important;
	font-size: 17px !important;
}
.bb {
	width: 620rpx;
	height: 90rpx;
	background: #8c1608;
	border-radius: 45rpx;
	font-weight: 400;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 0;
}
.wei {
	width: 106rpx;
	height: 106rpx;
	// background: #ffffff;
	border-radius: 5rpx;
	font-weight: 400;
	font-size: 30rpx;
	color: #11130b;
}
.xvan {
	background: #8c1608 !important;
	color: #ffffff !important;
}
.sl1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.sl2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}
.beijing {
	overflow: hidden;
	padding: 0 25rpx;
}
.beijing1 {
	min-height: 100vh;
	background-color: #f0e8dc;
	//系统tabbar不要加注释掉
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
</style>
